<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import myAxios from '../../../plugins/myAxios'

const honors = ref([
])

const dialogVisible = ref(false)
const newHonor = ref({
  name: '',
  level: '',
  issuer: '',
})

const honorLevels = [
  { label: '国家级', value: '国家级' },
  { label: '省级', value: '省级' },
  { label: '市级', value: '市级' },
  { label: '校级', value: '校级' }
]

const statusMap = {
  0: { type: 'info', label: '待审核' },
  1: { type: 'success', label: '已通过' },
  2: { type: 'danger', label: '已拒绝' }
}

// 获取荣誉列表
const getHonorsList = async () => {
  try {
    const res =  await myAxios.get('/honor/list')
    honors.value = res
  } catch (error) {
    ElMessage.error('获取荣誉列表失败')
  }
}

// 提交荣誉申请
const submitHonor = async () => {
  try {
    const res = await myAxios.post('/honor/apply', {
      ...newHonor.value,
      applyTime: new Date().toISOString().split('T')[0],
      status: 0,
      result: '-'
    })
    dialogVisible.value = false

    if (res) {
      ElMessage.success('申请提交成功')
      dialogVisible.value = false
      newHonor.value = { name: '', level: '',issuer:'' }
      await getHonorsList()
    } else {
      ElMessage.error(data.message || '提交申请失败')
    }
  } catch (error) {
    ElMessage.error('提交申请失败')
  }
}

onMounted(() => {
  getHonorsList()
})
</script>

<template>
  <div class="honors-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>荣誉申请表</span>
          <el-button type="primary" @click="dialogVisible = true">申请荣誉</el-button>
        </div>
      </template>

      <el-table :data="honors" border style="width: 100%">
        <el-table-column prop="name" label="荣誉名称" width="180" />
        <el-table-column prop="applyTime" label="申请日期" width="180" />
        <el-table-column prop="level" label="荣誉等级" width="120" />
        <el-table-column prop="issuer" label="颁发单位" width="180" />
        <el-table-column label="审核状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.status]?.type">
              {{ statusMap[row.status]?.label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="auditor" label="审核人" width="100" />
      </el-table>
    </el-card>

    <el-dialog
      v-model="dialogVisible"
      title="荣誉申请"
      width="500px"
    >
      <el-form :model="newHonor" label-width="100px">
        <el-form-item label="荣誉名称">
          <el-input v-model="newHonor.name" />
        </el-form-item>
        <el-form-item label="荣誉等级">
          <el-select v-model="newHonor.level" placeholder="请选择荣誉等级">
            <el-option
              v-for="item in honorLevels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="颁发单位">
          <el-input v-model="newHonor.issuer" placeholder="请输入颁发单位" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHonor">提交申请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.honors-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
